<template>
  <div class="comment">
    <ul>
      <li v-for="(value,index) in commentlist" :key="index">
        <!-- 评论人头像 -->
        <img 
            :src="value.user.avatarUrl" 
            alt 
            class="avatar" />
        <!-- 评论人昵称 -->
        <p class="name">{{value.user.nickname}}</p>
        <!-- 评论内容 -->
        <div class="content" :class="activeIndex==index?'active':''">
          <!-- 控制盒子 -->
          <div 
            class="controlbox" 
            v-if="activeIndex==index" 
            :style="{height:controlHeight+'px'}">
          </div>
          <div class="controlbox" v-else></div>
          <!-- 内容区域 -->
          <div class="textarea" ref="height">
            {{value.content}}
            <div class="hidebox" @click="hideComment">
              <div class="arrowup"></div>hide
            </div>
          </div>
          <!-- 监控盒子 -->
          <div class="monitorbox">
            <div class="slide" @click="showComment(index)">
              <div class="arrowdown"></div>more
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    name:'Comment',
    props:{
        commentId:{
            type:Number,
            required:true
        }
    },
    data(){
        return{
            commentlist:[],
            //评论区控制
            activeIndex: -1,
            controlHeight: 21, 
        }
    },
    watch:{
      commentId(){
        this.getHotComment()
      }
    },
    methods:{
        //获得热门评论
        getHotComment() {
            let o = {
                type: 0,
                id: this.commentId,
            }
            this.$api.HotComment(o).then(res => {
                this.commentlist = res.hotComments
            }).catch(() => {})
        },

        //评论区监控盒子控制类
        showComment(i) {
            this.controlHeight = this.$refs.height[i].clientHeight + 1
            this.activeIndex = i
        },
        hideComment() {
            this.activeIndex = -1
        },
    }
}
</script>
<style scoped>

/* 评论 */
.comment {
    height: 100%;
    width: 460px;
    overflow: hidden;
}

.comment ul {
    width: 104%;
    height: 104%;
    overflow: scroll;
}

.comment ul li {
    width: 460px;
    margin: 10px 0;
    padding-left: 65px;
    position: relative;
    overflow: hidden;
    text-align: left;
}

/* 评论人头像 */
.comment .avatar {
    width: 50px;
    height: 49px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    border: 1px solid #000;
}

/* 评论人昵称 */
.comment ul li .name {
    font-size: 18px;
    padding-bottom: 4px;
}

/* 评论内容盒子 */
.comment .content {
    width: 396px;
    height: 21px;
    font-size: 16px;
    overflow: hidden;
}

/* 评论被展开时 */
.comment .active {
    overflow: unset;
}

/* 评论控制盒子 */
.comment .content .controlbox {
    float: left;
    width: 1px;
    height: 22px;
}

/* 评论内容 */
.comment .content .textarea {
    float: right;
    width: 395px;
}

/* 评论监控盒子 */
.comment .content .monitorbox {
    float: right;
    position: relative;
    width: 1px;
}

/* 评论下拉按钮 */
.comment .content .monitorbox .slide {
    position: absolute;
    width: 70px;
    height: 25px;
    right: -394px;
    top: -21px;
    background-color: #fff;
    padding-left: 24px;
}

/* 评论向下箭头 */
.comment .content .monitorbox .arrowdown {
    border: 1px solid #000;
    width: 10px;
    height: 10px;
    border-left: none;
    border-top: none;
    position: absolute;
    transform: rotate(45deg);
    top: 3px;
    right: 50px;
    z-index: 1;
    display: inline-block;
}

/* 评论向上箭头 */
.comment .content .arrowup {
    border: 1px solid #000;
    width: 10px;
    height: 10px;
    border-left: none;
    border-top: none;
    position: absolute;
    right: 50px;
    top: 10px;
    z-index: 1;
    display: inline-block;
    transform: rotate(-135deg);
}

/* 评论隐藏盒子 */
.comment .hidebox {
    position: relative;
    text-align: right;
    padding-right: 10px;
}

.comment .hidebox:hover {
    color: #ff0
}

.comment .hidebox:hover .arrowup {
    border-color: #ff0
}

.comment .content .monitorbox .slide:hover {
    color: #ff0
}

.comment .content .monitorbox .slide:hover .arrowdown {
    border-color: #ff0
}

</style>